<template>
  <div class="wrapper">
    <header>
      <div class="back-btn" @click="goBack"><i class="fa fa-arrow-left"></i></div>
      <h3>用户管理</h3>
    </header>

    <div class="toolbar">
      <input v-model.trim="kw" class="search" placeholder="搜索用户名/ID/手机号" />
      <button class="btn" @click="load">刷新</button>
    </div>

    <ul class="list">
      <li v-for="u in filtered" :key="u.id" class="item">
        <div class="meta">
          <div class="name">{{ u.userName || ('用户#' + u.id) }}</div>
          <div class="sub">ID: {{ u.id }} · 手机: {{ u.phone || '-' }}</div>
          <div class="sub">角色：{{ (u.roles || u.authorities || []).join('、') || '-' }}</div>
        </div>
        <div class="ops">
          <button :class="['btn', u.enabled ? 'danger' : 'primary']" @click="toggle(u)">
            {{ u.enabled ? '禁用' : '启用' }}
          </button>
        </div>
      </li>
      <li v-if="!loading && !filtered.length" class="empty">暂无数据</li>
    </ul>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="err" class="error">{{ err }}</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'AdministratorToUser',
  data() {
    return { list: [], kw: '', loading: false, err: '' }
  },
  computed: {
    filtered() {
      const k = (this.kw || '').toLowerCase()
      return this.list.filter(u =>
        !k ||
        String(u.id).includes(k) ||
        (u.userName || '').toLowerCase().includes(k) ||
        (u.phone || '').includes(k)
      )
    }
  },
  mounted() { this.load() },
  methods: {
    goBack() { this.$router.push('/administratorindex') },
    async load() {
      this.loading = true; this.err = ''
      try {
        const res = await axios.get('/users')
        const arr = Array.isArray(res?.data?.data) ? res.data.data : (Array.isArray(res?.data) ? res.data : [])
        // 补默认字段
        this.list = arr.map(x => ({ enabled: true, roles: x.roles || x.authorities || [], ...x }))
      } catch (e) {
        // 回退模拟数据，保证页面可用
        this.list = [
          { id: 1001, userName: 'alice', phone: '13800000001', roles: ['USER'], enabled: true },
          { id: 1002, userName: 'bob', phone: '13800000002', roles: ['USER', 'BUSINESS'], enabled: true },
          { id: 1003, userName: 'charlie', phone: '13800000003', roles: ['USER'], enabled: false },
        ]
        this.err = ''
      } finally { this.loading = false }
    },
    async toggle(u) {
      u.enabled = !u.enabled
      // TODO: 调用后端启用/禁用接口
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background: #fff;
}

header {
  width: 100%;
  height: 15vw;
  background: #0097FF;
  display: flex;
  align-items: center;
}

.back-btn {
  color: #fff;
  font-size: 6vw;
  margin-left: 2.5vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8vw;
  height: 8vw;
}

h3 {
  font-size: 6vw;
  font-weight: 700;
  color: #fff;
  margin-left: 2.5vw;
}

.toolbar {
  display: flex;
  gap: 2vw;
  padding: 3vw;
}

.search {
  flex: 1;
  height: 9vw;
  border: 1px solid #eee;
  border-radius: 2vw;
  padding: 0 3vw;
  font-size: 3.6vw;
}

.btn {
  height: 9vw;
  padding: 0 4vw;
  border: none;
  border-radius: 2vw;
  background: #0097FF;
  color: #fff;
  font-size: 3.6vw;
}

.btn.danger {
  background: #ff4d4f;
}

.list {
  list-style: none;
  margin: 0;
  padding: 3vw;
  display: flex;
  flex-direction: column;
  gap: 3vw;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 2vw;
  padding: 3vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.meta .name {
  font-size: 4vw;
  font-weight: 700;
}

.meta .sub {
  font-size: 3.2vw;
  color: #888;
  margin-top: 1vw;
}

.empty {
  text-align: center;
  color: #999;
  padding: 6vw 0;
}

.loading,
.error {
  text-align: center;
  padding: 3vw 0;
}

.error {
  color: #ff4d4f;
}
</style>